<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="common/commonVant::commonStaticVant"></div>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app" v-cloak>
    <van-form @submit="submitForm" validate-first>
        <van-cell-group>
            <van-field v-model="request.username" label="用户名" placeholder="请输入用户名"
                       :rules="[{ required:true, message: '用户名不能为空！' }]"
            />
        </van-cell-group>
        <van-cell-group>
            <van-field v-model="request.password" label="密码" placeholder="请输入密码"
                       :rules="[{ required:true, message: '密码不能为空！'}]"
            />
        </van-cell-group>
        <van-cell-group>
            <van-field v-model="request.passwordAgain" label="确认密码" placeholder="请再次输入密码" :disabled="passwordAgainVal"
                       :rules="[{ required:true, validator:passwordAgainValidator, message: '确认密码错误！'}]"
            />
        </van-cell-group>
        <van-cell-group>
            <van-field label="性别" :rules="[{ required:true, validator:sexValidator, message: '请选择性别！'}]">
                <template #input>
                    <van-radio-group v-model="request.sex" direction="horizontal">
                        <van-radio name="男">男</van-radio>
                        <van-radio name="女">女</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
        </van-cell-group>
        <van-cell-group>
            <van-field v-model="request.mobile" label="手机号"
                       :rules="[{ required:true,validator:mobileValidator, message: '手机号错误！' }]"
                       placeholder="请输入手机号"/>
        </van-cell-group>
        <van-cell-group>
            <van-field v-model="request.email" label="邮箱" placeholder="请输入邮箱"
                       :rules="[{ required:true,validator:emailValidator, message: '邮箱错误' }]"
            />
        </van-cell-group>
        <van-cell-group>
            <van-field v-model="request.introduce" label="个人介绍" placeholder="请输入个人介绍"
                       :rules="[{ required:true, message: '个人介绍不能为空' }]"
            />
        </van-cell-group>
        <van-cell-group>
            <van-field v-model="value" center clearable label="邮箱验证码" placeholder="请输入邮箱验证码">
                <template #button>
                    <van-button size="small" type="primary">发送验证码</van-button>
                </template>
            </van-field>
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">
                注册
            </van-button>
        </div>
    </van-form>
    <van-dialog v-model="successShow" title="注册成功，是否马上登陆？" show-cancel-button @confirm="login">
    </van-dialog>
    <van-notify v-model="failShow" type="danger">
        <van-icon name="bell" style="margin-right: 10px;"/>
        <span>{{failMessage}}</span>
    </van-notify>
</div>
<script>
    let mv = new Vue({
        el: "#app",
        data: {
            successShow: false,
            failShow: false,
            failMessage: '',
            value: '',
            request: {
                username: '',
                password: '',
                passwordAgain: '',
                sex: '',
                mobile: '',
                email: '',
                introduce: ''
            }
        },
        computed: {
            passwordAgainVal() {
                return !this.request.password ? true : false;
            }
        },
        methods: {
            mobileValidator(val) {
                return /^[1][3,5,7,8][0-9]{9}$/.test(val);
            },
            emailValidator(val) {
                // return /^\w+@[a-z0-9]+\.[a-z]{2,4}$/.test(val);
                return true;
            },
            passwordAgainValidator(val) {
                return this.request.password == val;
            },
            sexValidator(val) {
                return this.request.sex != '';
            },
            async submitForm(value) {
                const result = await httpPost('/user/register', this.request);
                console.log(result);
                if (result.code == 200) {
                    this.successShow = true;
                } else {
                    this.failMessage = result.message;
                    this.failShow = true;
                    setTimeout(() => {
                        this.failShow = false;
                    }, 2000);
                }
            },
            login() {
                window.location.href = '/home/login';
            }
        },
        // mounted: {}
    })
</script>
</body>
<style>

</style>
</html>